<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>swiper</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.4.2/css/swiper.min.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #f2f2f2;
        }

        .swiper-container {
            width: 1000px;
            height: 600px;
            margin: 80px auto;
        }

        .swiper-slide {
            position: relative;
            background: #fff;
        }

        .img-box {
            width: 100%;
            height: 100%;  
        }

        .img-text {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background: rgba(0,0,0,.6);
            line-height: 60px;
            text-align: center;
            font-size: 18px;
            color: #fff;
        }
    
    </style>
</head>
<body>
    
    <div class="swiper-container">
        <div class="swiper-wrapper" id="mySwiperWrapper">
           
        </div>
       
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
    </div>

    <script id="swiperSlide" type="text/html">
        {{each slideImgAry}}
            <div class="swiper-slide">
                <div class="img-box" style="background: url('{{$value.imgAdress}}') no-repeat center center;background-size: cover;">
                
                </div>
                <p class="img-text">
                    {{$value.imgText}}
                </p>
            </div>    
        {{/each}}
    
    </script>

    <script src="https://cdn.bootcss.com/Swiper/4.4.2/js/swiper.min.js"></script>
    <script src="template.js"></script>
    <script>
    
        // 数据的渲染
        var myData = {
            "slideImgAry": [
                {imgAdress: "../404.png",imgText: "图片"},
                {imgAdress: "",imgText: "图片"},
                {imgAdress: "",imgText: "图片"},
                {imgAdress: "",imgText: "图片"},
                {imgAdress: "",imgText: "图片"},
                {imgAdress: "",imgText: "图片"},
                {imgAdress: "",imgText: "图片"},
            ]
        };
        //渲染
        var html = template('swiperSlide', myData);
        document.getElementById('mySwiperWrapper').innerHTML = html;
        
        // 初始化 swiper 滑动插件
        (function () {   

            var mySwiper = new Swiper ('.swiper-container', {
                direction: 'horizontal', // 垂直切换选项
                loop: true, // 循环模式选
                
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                effect : 'cube',
            });
        
        })();   

            
    </script>

</body>
</html>